<template>
	<view>

		<view class="userInfo_box">
			<!-- 个人信息 -->
			<view class="userInfo_con" @click="goPage('./userInfo')">
				<u-avatar :src="userInfo.header_img_url"
					size="120" mode="circle">
				</u-avatar>
				<view class="userCon">
					<view class="userName">
						<!-- <image src="../../static/truename.png" mode="" v-if="userInfo.id_card>0"></image> -->
						{{userInfo.name ? userInfo.name : userInfo.nickname ? userInfo.nickname : '完善资料'}}<text>(ID:{{userInfo.id_sn}})</text>
					</view>
					<view class="userTel digitFont">
					<text  v-if="userInfo.mobile">{{userInfo.mobile}}</text>
					<text class="trueBox" v-if="userInfo.is_vip_str!='--' && userInfo.is_vip_str!='无限制'">已实名</text>
					</view>
				</view>
				<view class="userMore">
					<text>更新头像</text>
					<u-icon name="arrow-right" color="#8B8A90"></u-icon>
				</view>
			</view>

			<!-- 群和分享 -->
			<view class="peopleBox">
			
				
				<!-- #ifdef APP-PLUS -->
				<!-- <view class="peopleItem" v-if="userInfo.status_app==1">
					<button ></button>
					<view class="peopleMain">
						<view class="peopleGroup">1V1在线客服</view>
						<view class="peopleDesc">在线随时沟通</view>
					</view>
					<view class="peopleIcon">
						<image src="/static/user/userMenu1.png" mode=""></image>
					</view>
				</view> -->
				
				<view class="peopleItem" @click="goPage('/pagesOther/user/report')" v-if="userInfo.status_app==2">
					<view class="peopleMain">
						<view class="peopleGroup">问题反馈</view>
						<view class="peopleDesc">在线随时沟通</view>
					</view>
					<view class="peopleIcon">
						<image src="/static/user/userMenu1.png" mode=""></image>
					</view>
				</view>
				
				<view class="peopleItem" @click="appShare()">
					<view class="peopleMain">
						<view class="peopleGroup">分享好友</view>
						<view class="peopleDesc">邀请好友使用</view>
					</view>
					<view class="peopleIcon">
						<image src="/static/user/userMenu2.png" mode=""></image>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				
				<view class="peopleItem" >
					<view class="peopleMain">
						<button open-type="contact">
							<view class="peopleGroup">在线客服</view>
							<view class="peopleDesc">在线随时沟通</view>
						</button>
					</view>
					<view class="peopleIcon">
						<image src="/static/user/userMenu1.png" mode=""></image>
					</view>
				</view>
				<button class="peopleItem" open-type="share" hover-class="none">
					<view class="peopleMain">
						<view class="peopleGroup">分享好友</view>
						<view class="peopleDesc">邀请好友使用</view>
					</view>
					<view class="peopleIcon">
						<image src="/static/user/userMenu2.png" mode=""></image>
					</view>
				</button>
				<!-- #endif -->
				
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="vipBox" @click="vipPage" v-if="platform=='android' || (userInfo.is_vip_str!='无限制' && userInfo.is_vip_str!='--')">
			
			<view class="vipIcon">
				<image src="../../static/guan2.png" mode=""></image>
			</view>
			<view class="vipText">
				{{userInfo.is_vip_str=='--'?'您还不是vip':('会员有效期至'+userInfo.is_vip_str)}}
			</view>
			<view class="vipRole">
				查看VIP权益
				<u-icon name="arrow-right" color="#ffa91e" size="28"></u-icon>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<view class="vipBox" @click="vipPage"  v-if="((platform=='android'  || platform=='devtools') && (userInfo.is_vip_str!='无限制')) || (userInfo.is_vip_str!='无限制' && userInfo.is_vip_str!='--')">
			<view class="vipIcon">
				<image src="../../static/guan2.png" mode=""></image>
			</view>
			<view class="vipText">
				{{userInfo.is_vip_str=='--'?'您还不是vip':('会员有效期至'+userInfo.is_vip_str)}}
			</view>
			<view class="vipRole">
				查看VIP权益
				<u-icon name="arrow-right" color="#ffa91e" size="28"></u-icon>
			</view>
		</view>
		<!-- #endif -->
		
		
		<!-- 积分 -->
		<view class="integralBox" @click="goPage('/pagesOther/user/myIntegral')">
			<view class="integralCon">
				<view class="integralTitle">
					<view class="integralTitleLeft">
						获取积分
					</view>
					<view class="integralTitleRight">
						<u-line-progress active-color="#327FE8" inactive-color="#F0F0F0" :height="20"
							:show-percent='false' :percent="taskData.bili"></u-line-progress>
					</view>
					<view class="integralTitleText">
						{{taskData.end_num}}/{{taskData.totle}}
					</view>
				</view>

				<view class="taskItem" v-for="(item,index) in taskList" :key="index" v-if="index==0">
					<view class="taskIcon">
						<image src="/static/user/userMenu3.png" mode=""></image>
					</view>
					<view class="taskMain">
						{{item.title}} +{{item.num}}积分
					</view>
					<view class="taskBtn">
						<u-icon name="arrow-right" color="#8B8A90" size="28"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 设置 -->
		<view class="userSet_box">
			<view class="userSet_con">
				<view class="setHead_con">常用功能</view>
				<view class="setList_con">
					<view class="setItem" @click="goPage('/pagesOther/mall/mallHome')">
						<view class="setIcon">
							<image src="/static/user/userSet1.png" mode=""></image>
						</view>
						<view class="setName">积分商城</view>
					</view>
					<view class="setItem" @click="goPage('/pagesOther/order/orderList')">
						<view class="setIcon">
							<image src="/static/user/userSet2.png" mode=""></image>
						</view>
						<view class="setName">我的订单</view>
					</view>
					<view class="setItem" @click="goPage('/pagesOther/user/photo')">
						<view class="setIcon">
							<image src="/static/user/userSet3.png" mode=""></image>
						</view>
						<view class="setName">照片管理</view>
					</view>
					
					<view class="setItem" @click="goPage('/pagesOther/address/addressList')">
						<view class="setIcon">
							<image src="/static/user/userSet10.png" mode=""></image>
						</view>
						<view class="setName">收货地址</view>
					</view>
					<!-- <view class="setItem" @click="goPage('/pages/watermarkCamera/watermarkCamera')">
						<view class="setIcon">
							<image src="/static/user/userSet3.png" mode=""></image>
						</view>
						<view class="setName">水印相机</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="userSet_box">
			<view class="userSet_con">
				<view class="setHead_con">其他功能</view>
				<view class="setList_con">
					<view class="setItem" @click="goPage('./userInfo')">
						<view class="setIcon">
							<image src="/static/user/userSet4.png" mode=""></image>
						</view>
						<view class="setName">个人资料</view>
					</view>
					<view class="setItem" @click="goPage('/pagesOther/article/list')">
						<view class="setIcon">
							<image src="/static/user/userSet5.png" mode=""></image>
						</view>
						<view class="setName">常见问题</view>
					</view>
					<view class="setItem" @click="goPage('/pagesOther/user/report')">
						<view class="setIcon">
							<image src="/static/user/userSet6.png" mode=""></image>
						</view>
						<view class="setName">问题反馈</view>
					</view>
					<view class="setItem" @click="goPage('/pagesOther/user/userAbout')">
						<view class="setIcon">
							<image src="/static/user/userSet7.png" mode=""></image>
						</view>
						<view class="setName">关于我们</view>
					</view>
					<!-- <view class="setItem" @click="goPage('/pagesOther/user/messageSet')">
						<view class="setIcon">
							<image src="/static/user/userSet8.png" mode=""></image>
						</view>
						<view class="setName">消息设置</view>
					</view> -->
					
					<!-- #ifdef MP-WEIXIN -->
					<button class="setItem" hover-class="none" open-type="openSetting">
						<view class="setIcon">
							<image src="/static/user/userSet9.png" mode=""></image>
						</view>
						<view class="setName">设置</view>
					</button>
					<!-- #endif -->
					
					<view class="setItem" @click="goPage('/pagesOther/user/appSet')">
						<view class="setIcon">
							<image src="/static/user/userSet9.png" mode=""></image>
						</view>
						<view class="setName">系统设置</view>
					</view>
					
					
				</view>
			</view>
		</view>

		
		<view class="qunBg" @click="qunShow=false" v-if="qunShow"></view>
		<view class="qunBox" v-if="qunShow" @click="saveClick">
			<image :src="weixunqun" mode=""></image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {
					status_app:2,
					is_vip_str:'无限制',
				},

				// 分享弹窗
				shareShow: false,

				// 生成海报
				poster: {},
				posterPath: '',
				weixunqun: '',
				qunShow: false,
				taskList: [],
				taskData: {
					end_num:'',
					totle:''
				},
				platform:'ios',
			}
		},
		created() {
			var _this = this;
			//_this.getPosterInfo();
		},
		onLoad() {
			this.getTaskList()
		},
		onShow() {
			var _this = this;
			_this.getUserInfo();
			_this.getQun();
			let platform = uni.getSystemInfoSync().platform;
			console.log('=====设备新=============')
			console.log(platform)
			_this.platform=platform
		},
		onReady() {
			// 设置消息提醒
			// uni.setTabBarBadge({
			// 	index: 1,
			// 	text: '1'
			// })
		},
		onHide() {
			this.shareShow = false;
		},
		onShareAppMessage(res) {
			this.addShareLog();
			return {
				title: '给你推荐一个好用的记工记账小程序',
				path: '/pages/index/index',
				imageUrl: '/static/sharePic.jpg',
			}
		},
		onShareTimeline(res) {
			return {
				title: '记工小程序',
				path: '/pages/index/index',
				imageUrl: '/static/sharePic.jpg',
			}
		},
		methods: {
			//vip会员
			vipPage(){
				var _this=this;
				// // #ifdef MP-WEIXIN
				// uni.navigateTo({
				// 	url:'/pages/message/webView'
				// })
				// // #endif
				console.log('============')
				// #ifdef MP-WEIXIN
				uni.navigateTo({
					url:'/pagesOther/user/vipHome'
				})
				// #endif
				
				
				// #ifdef APP-PLUS
				var userInfo=_this.userInfo;
				if(userInfo['is_vip_str']=='--'){
					uni.navigateTo({
						url:'/pages/message/imgGzh'
					})
				}else{
					uni.navigateTo({
						url:'/pagesOther/user/vipHome'
					})
				}
				
				// #endif
			},
			
			
			//打开微信小程序
			openWxApp(){
				console.log('===========')
				var url='https://s.pdb2.com/pages/20230201/DMoLeGFE1c4ChPa.html';
				uni.setStorageSync('link', url);
				uni.navigateTo({
					url:'/pages/message/divWebView'
				})
				return
			},
			//添加分享记录
			addShareLog(){
				var _this = this;
				_this.$u.post('/api/plus.report/addShareLog', {
					type: 'userhome',
				}).then(res => {
					
				}).catch(res => {
					console.log(res);
				})
			},
			// App分享为微信小程序（App中分享一个内容到微信好友，对方微信中呈现的是一个小程序卡片）
			appShare() {
				var _this = this;
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					imageUrl: '/static/sharePic.jpg',
					title: '给你推荐一个好用的记工记账小程序',
					miniProgram: {
						id: getApp().globalData.originalId,
						path: 'pages/index/index',
						type: 0,
						webUrl: this.app_url
					},
					success: res => {
						console.log(JSON.stringify(res));
					}
				});
			},
			goIntergal() {
				uni.navigateTo({
					url: '/pages/user/integral/integralHome'
				})
			},
			// 获取任务列表
			getTaskList() {
				var _this = this;
				_this.$u.get('/api/project.task/getList', {}).then(res => {
					_this.taskList = res.data;
					_this.taskData = res.extend
				}).catch(res => {
					console.log(res);
				})
			},
			// 保存
			saveClick() {
				let _this = this;
				uni.downloadFile({
					url: _this.weixunqun,
					success: function(res) {
						console.log(res)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								console.log('save success');
							}
						});
					}
				})
			},
			
			// 获取数据辞典信息
			getQun() {
				let _this = this;
				_this.$u.get('/api/plus.dictionaries/getDetail', {
					name: 'weixinqun',
				}).then(res => {
					console.log("==获取数据辞典信息==");
					console.log(res);
					var weixunqun = res.data.value;

					_this.weixunqun = weixunqun;

				}).catch(res => {
					console.log(res);
				})
			},
			tishiShare() {
				uni.showModal({
					title: "提示",
					content: '安卓系统请点击右上角“...”选择分享朋友圈，ios暂不支持',
					showCancel: false
				})
				this.shareShow = false;
			},
			
			// 获取用户信息
			getUserInfo() {
				var _this = this;
				_this.$u.get('/api/user.index/getDetail', {}).then(res => {
					uni.hideLoading();
					console.log("==获取用户信息==");
					console.log(res.data);
					
					uni.setStorageSync('userInfo', res.data);
					
					_this.userInfo = res.data;
				}).catch(res => {
					console.log(res);
					if(res.data==''){
						console.log('wx=============================8')
						uni.navigateTo({
							url:'/pages/login/loginWx'
						})
					}
				})
			},

			// 获取海报信息
			getPosterInfo() {
				var _this = this;
				_this.$u.get('/api/plus.poster/creatPoster', {}).then(res => {
					uni.hideLoading();
					console.log("==获取海报信息==");
					console.log(res);
					var posterInfo = res.data;

					// 生成海报
					_this.poster = {
						css: {
							width: "750rpx",
							height: '1080rpx',
						},
						views: [{
								type: 'image',
								src: posterInfo.imgs_url,
								css: {
									width: '750rpx',
									height: '1080rpx',
									objectFit: 'cover'
								}
							}, {
								type: "view",
								views: [{
										text: posterInfo.text1,
										type: "text",
										css: {
											display: "block",
										}
									},
									{
										text: posterInfo.text2,
										type: "text",
										css: {
											display: "block",
											marginTop: "20rpx",
										},
									}
								],
								css: {
									color: "#fff",
									fontSize: "32rpx",
									fontWeight: "bold",
									position: "absolute",
									left: "40rpx",
									top: "40rpx",
								},
							},
							{
								type: "view",
								views: [{
									text: "扫码快速记工记账",
									type: "text",
									css: {
										display: "block",
									},
								}, {
									text: "海报由记工小程序生成",
									type: "text",
									css: {
										display: "block",
										marginTop: "20rpx",
									},
								}],
								css: {
									color: "#fff",
									fontSize: "28rpx",
									position: "absolute",
									left: "40rpx",
									bottom: "70rpx",
								},
							},
							{
								type: "view",
								css: {
									width: "140rpx",
									height: "140rpx",
									padding: "10rpx",
									background: "#fff",
									borderRadius: "16rpx",
									position: "absolute",
									right: '40rpx',
									bottom: '40rpx',
								},
								views: [{
									type: "image",
									text: posterInfo.card_url,
									css: {
										width: "120rpx",
										height: "120rpx",
										marginTop: '10rpx',
										marginLeft: '10rpx',
									},
								}],
							}
						],
					}
				}).catch(res => {
					console.log(res);
				})
			},

			// 页面跳转
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// 个人信息
	.userInfo_box {
		padding: 0 30rpx;
		background-color: #fff;
		overflow: hidden;
	}

	.userInfo_con {
		padding: 30rpx 0;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.userCon {
		flex: 2;
		margin-left: 20rpx;
	}

	.userName {
		font-size: 30rpx;
		font-weight: bold;
		color: #12104B;
	}
	.userName image{
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
		margin-top: -4rpx;
	}
	.userName text{
		font-size: 26rpx;
		font-weight: 400;
		padding-left: 10rpx;
	}

	.userTel {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.userMore {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.userMore text {
		color: $uni-color-text;
		margin-right: 10rpx;
	}

	// 群和分享	
	.peopleBox {
		padding-bottom: 30rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
	}

	.peopleItem {
		width: 335rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #E5FFF1;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.peopleMain {
		flex: 2;
		text-align: left;
	}
	.peopleMain button{
		text-align: left;
	}
	.peopleGroup {
		font-size: 32rpx;
		font-weight: bold;
		color: #06C158;
	}

	.peopleDesc {
		font-size: 28rpx;
		color: $uni-color-text;
		margin-top: 20rpx;
	}

	.peopleItem:last-child {
		background-color: #FFF5E5;
	}

	.peopleItem:last-child .peopleGroup {
		color: #FC7032;
	}

	.peopleIcon {
		width: 60rpx;
		height: 60rpx;
	}

	.peopleIcon image {
		width: 100%;
		height: 100%;
	}

	// 分享弹窗
	.shareCon {
		padding: 80rpx 0;
		background-color: #fff;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shareItem {
		flex: 1;
		text-align: center;
	}

	.sharePic {
		width: 100%;
	}

	.sharePic image {
		width: 96rpx;
		height: 96rpx;
	}

	.shareName {
		font-size: 30rpx;
		color: #222;
		margin-top: 20rpx;
	}

	.qunBg {
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: 0.3;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9991;
	}

	.qunBox {
		width: 550rpx;
		height: 680rpx;
		position: fixed;
		top: 15%;
		left: 100rpx;
		z-index: 9998;
		border-radius: 20rpx;
		padding: 20rpx;
		overflow: hidden;
	}

	.qunBox image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		overflow: hidden;
	}

	// 积分
	.integralBox {
		padding: 20rpx 30rpx;
	}

	.integralCon {
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.integralTitle {
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.integralTitleLeft {
		flex: 2;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.integralTitleRight {
		width: 300rpx;
	}

	.integralTitleText {
		color: $uni-color-active;
		margin-left: 10rpx;
	}

	.taskItem {
		width: 100%;
		background-color: #F0F6FF;
		padding: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.taskIcon {
		width: 40rpx;
		height: 40rpx;
		float: left;
		margin-right: 10rpx;
	}

	.taskIcon image {
		width: 100%;
		height: 100%;
	}

	.taskMain {
		width: 400rpx;
		float: left;
	}

	.taskBtn {
		float: right;
	}

	// 设置
	.userSet_box {
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}

	.userSet_con {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.setHead_con {
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}

	.setList_con {
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.setItem {
		width: calc(100% / 4);
		text-align: center;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.setIcon {
		width: 100%;
	}

	.setIcon image {
		width: 50rpx;
		height: 50rpx;
	}

	.setName {
		font-size: 28rpx;
	}
	
	.trueBox{
		color: #327FE8;
		border: 2rpx solid #327FE8;
		border-radius: 10rpx;
		margin-left: 20rpx;
		font-size: 22rpx;
		padding: 0rpx 10rpx;
	}
	
	
	.vipBox{
		// background-color: #222;
		width: 690rpx;
		height: 120rpx;
		margin: 20rpx auto 0 auto;
		border-radius: 20rpx;
		background-image: linear-gradient(to right,#555,#333);
		overflow: hidden;
	}
	.vipIcon{
		width: 50rpx;
		height: 50rpx;
		margin: 36rpx 20rpx 0 30rpx;
		float: left;
	}
	.vipIcon image{
		width: 100%;
		height: 100%;
	}
	.vipText{
		line-height: 120rpx;
		color: #fff;
		font-size: 30rpx;
		float: left;
		width: 360rpx;
	}
	.vipRole{
		float: right;
		line-height: 120rpx;
		color: #ffa91e;
		font-size: 26rpx;
		width: 200rpx;
		text-align: right;
		padding-right: 20rpx;
	}
</style>
